:host {
  --mdc-radio-unchecked-color: var(--cv-theme-on-surface-variant);
  --mdc-theme-secondary: var(--cv-theme-primary);
  --mdc-radio-disabled-color: var(--cv-theme-on-surface-38);

  .mdc-radio__background {
    position: absolute;
    top: 8px;
    right: 8px;
  }
}

:host([width='fill']) {
  width: 100%;
}

.mdc-radio {
  display: flex;
  justify-content: var(--cv-icon-radio-horizontal-alignment, center);
  align-items: var(--cv-icon-radio-vertical-alignment, center);
  flex-direction: column;
  text-align: var(--cv-icon-radio-text-alignment, center);
  row-gap: 8px;
  width: var(--cv-icon-radio-width, 200px);
  height: var(--cv-icon-radio-height, 160px);
  border: solid 2px var(--mdc-theme-border);
  border-radius: 8px;
  color: var(--mdc-theme-text-primary-on-background);
}

.mdc-radio--touch .mdc-radio__native-control {
  width: 100%;
  height: 100%;
}

:host([checked]) .mdc-radio {
  --mdc-theme-text-icon-on-background: var(--mdc-theme-primary);

  border: solid 2px var(--mdc-theme-primary);
  background-color: var(--mdc-theme-surface-primary-highlight);
  font-variation-settings: 'FILL' 1;

  &:hover {
    background-color: var(--mdc-theme-surface-primary-highlight-hover);
  }
}

[name='icon']::slotted(*) {
  font-size: 40px;
  color: var(--mdc-theme-text-icon-on-background);
}

[name='text']::slotted(*) {
  color: var(--mdc-theme-text-primary-on-background);
  font-family: var(--mdc-typography-body1-font-family);
  font-size: var(--mdc-typography-body1-font-size);
  font-weight: var(--mdc-typography-body1-font-weight);
  line-height: var(--mdc-typography-body1-line-height);
  letter-spacing: 0.4px;
}

[name='text']::slotted(*:last-child) {
  color: var(--mdc-theme-text-secondary-on-background);
  font-family: var(--mdc-typography-body2-font-family);
  font-size: var(--mdc-typography-body2-font-size);
  font-weight: var(--mdc-typography-body2-font-weight);
  line-height: var(--mdc-typography-body2-line-height);
}
